<template>
  <div class="newUser">
    <!-- <image src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/index/newUser/title.png" alt="" class="img"> -->
    <div class="title">
      <image
        src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/index/newUser/title.png"
        mode="aspectFit"
        alt=""
        class="img"
      />
      <span class="text">热销</span>
      <span class="text">榜单</span>
      <span class="desc">租机0押金 月付无压力</span>
    </div>
    <div class="content">
      <scroll-view class="scroll-content scroll-box" :scroll-x="true">
        <div
          class="item"
          v-for="(item, index) in goodsType"
          :key="`select${index}`"
          @tap="changeSelect(index)"
        >
          <div class="box flex-col">
            <span class="text">{{ item.marketingName }}</span>
            <span class="selece-line" v-if="index == selectGoodsType"></span>
          </div>
        </div>
      </scroll-view>
      <scroll-view
        class="scroll-content scroll-header"
        :scroll-x="true"
        :enhanced="true"
        :showScrollbar="false"
      >
        <div
          class="item"
          v-for="(item, index) in goodsList"
          :key="`goods${index}`"
          @tap="$goGoodsDeail({ id: item.goodsId })"
        >
          <div class="box flex-col">
            <img :src="item.coverUrl" class="img" mode="aspectFit" />
            <span class="name ellipsis_1">{{ item.goodsName }}</span>
            <div class="price">
              ￥<span class="infact-price">{{ item.minimumRentPrice }}</span
              >/天
            </div>
            <span class="old-price">￥{{ item.minimumRentPrice }}/天</span>
          </div>
        </div>
      </scroll-view>
    </div>
  </div>
</template>
<script>
export default {
  name: "newUser",
  data() {
    return {
      goodsType: [
        {
          id: 49,
          marketingName: "精选推荐",
          marketingTip: "爆款好物",
          position: 4,
          marketingGoodsList: null,
          url: null,
        },
        {
          id: 74,
          marketingName: "精品手机",
          marketingTip: "品牌旗舰",
          position: 4,
          marketingGoodsList: null,
          url: null,
        },
        {
          id: 50,
          marketingName: "休闲娱乐",
          marketingTip: "娱乐影音",
          position: 4,
          marketingGoodsList: null,
          url: null,
        },
        {
          id: 52,
          marketingName: "设计入门",
          marketingTip: "绘图设计",
          position: 4,
          marketingGoodsList: null,
          url: null,
        },
        {
          id: 53,
          marketingName: "轻享办公",
          marketingTip: "极速发货",
          position: 4,
          marketingGoodsList: null,
          url: null,
        },
        {
          id: 61,
          marketingName: "游戏娱乐",
          marketingTip: "主流游戏",
          position: 4,
          marketingGoodsList: null,
          url: null,
        },
      ],
      selectGoodsType: 0,
      goodsList: [],
    };
  },
  mounted() {
    this.getTypes();
  },
  computed: {
    marketId() {
      return this.goodsType[this.selectGoodsType]
        ? this.goodsType[this.selectGoodsType].id
        : "";
    },
  },
  methods: {
    changeSelect(index) {
      this.selectGoodsType = index;
      console.log(this.selectGoodsType, index, "-----");
      this.goodsList = [];
      this.getData();
    },
    getTypes() {
      this.$api.getMarketingList({ position: 2 }).then((data) => {
        this.goodsType = data;
        this.getData();
      });
    },
    getData() {
      const params = {
        marketingId: this.marketId,
        pageNumber: 1,
        pageSize: 10,
        // position: 2
      };
      this.$api.getMarketGoodsList(params).then((data) => {
        this.goodsList.push(...data);
      });
      // this.$api.getMarketGoodsList(params).then(data => {
      //   this.goodsList.push(...data)
      // })
    },
  },
};
</script>
<style lang="scss">
.newUser {
  width: 100%;
  height: 294px;
  // background: url("../../../static/icones/gonglue.png") no-repeat center;
  // background-size: 100%;
  // background: #FFFFFF;
  opacity: 1;
  border-radius: 7px;
  margin-top: 11px;
  // padding: 0 11px 0 13px;
  .title {
    height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
    .img {
      width: 40px;
      height: 18px;
      margin-right: 4px;
    }
    .text {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 30px;
      color: #333;
      font-weight: 600;
    }
    .desc {
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 19px;
      color: #555;
      margin-left: 7px;
    }
  }
  .scroll-box {
    .item {
      margin-right: 23px;
      width: 52px;
      &:last-child {
        margin-right: 0;
      }
      .box {
        .text {
          font-size: 14px;
          line-height: 20px;
          color: #333;
          float: left;
          min-width: 100px;
        }
        .selece-line {
          width: 100%;
          height: 3px;
          background: #29b5ff;
          opacity: 1;
          border-radius: 1.5px;
          margin-top: 4px;
          float: left;
        }
      }
    }
  }
  .scroll-header {
    margin-top: 14px;
    // 去除滑动条 begin
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;

    &::-webkit-scrollbar {
      width: 0 !important;
    }
    .item {
      margin-right: 10px;
      width: 110px;
      &:last-child {
        margin-right: 0;
      }
      .box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 110px;
        .img {
          height: 74px;
          max-width: 110px;
        }
        .name {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          line-height: 19px;
          color: #0c0c0c;
          margin-top: 4px;
          max-width: 100px;
        }
        .price {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 15px;
          color: #ff5426;
          display: flex;
          letter-spacing: -1px;
          margin-top: 4px;
        }
        .old-price {
          font-size: 10px;
          line-height: 13px;
          color: #000;
          margin-top: 4px;
          text-decoration: line-through;
        }
      }
    }
  }
}
</style>
